body {
    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;
    font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
    color: #000;
    background: #f2f2f2;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?c6oeu6');
    src: url('../fonts/icomoon.eot?c6oeu6#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?c6oeu6') format('truetype'), url('../fonts/icomoon.woff?c6oeu6') format('woff'), url('../fonts/icomoon.svg?c6oeu6#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

a {
    text-decoration: none;
    color: #333;
}

ul,
ol {
    list-style: none;
    /* ul会默认有margin和padding */
    margin: 0;
    padding: 0;
}

i {
    font-style: normal;
}

img {
    vertical-align: middle;
}


/* 搜索 */

.search-index {
    display: flex;
    /* 固定定位和父级么有关系，它以屏幕为准，所以需要max/min-width */
    position: fixed;
    top: 0;
    /* 另外在非app模式的时候，left=0就是最左侧开始的，所以需要修改一下，居中对齐，需要先将left改为50%，然后在回去页面宽度的50%，再加上兼容性 */
    /* 也可以不给left值，那么就是默认就是居然的，jd就是这种做法 */
    /* 两种皆可 */
    left: 50%;
    /* 兼容性的写在上面 */
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    /* 固定定位的盒子需要写宽度 */
    width: 100%;
    max-width: 540px;
    min-width: 320px;
    height: 50px;
    background-color: #f6f6f6;
    z-index: 10;
}

.search {
    flex: 1;
    border: 1.8px solid #0086f6;
    border-radius: 15px;
    height: 28px;
    margin: 10px 0 auto 10px;
}

.search::before {
    font-family: 'icomoon';
    content: "\e94d";
    padding: 8px;
    line-height: 30px;
}

.search {
    margin: 5px auto auto 8px;
    color: #999;
    font-size: 15px;
}

.user::before {
    content: "";
    /* 要显示这个图片需要给大小，而a是行内元素，要改为block */
    display: block;
    width: 23px;
    height: 23px;
    /* 1.fw打开后，先勾选上，然后将整体图片缩小一倍
    2.选择缩小的某个图，看大小合适不，以及所在位置
    3.最后要记得给size，size是缩小的数字 */
    background: url(../image/sprite.png) no-repeat -59px -194px;
    background-size: 104px auto;
    margin: 5px auto 0;
}

.user {
    width: 44px;
    height: 42px;
    font-size: 10px;
    text-align: center;
    color: #2eaae0;
}


/* 焦点图 */

.focus {
    position: relative;
    margin-top: 48px;
    overflow: hidden;
}

.focus ul {
    width: 800%;
    overflow: hidden;
    /* 要让第一张图片显示出来，而不是最后一张，所以需要往左移一个图片，因为图片也是100%的宽度，也就是父盒子的距离 */
    margin-left: -100%;
}

.focus li {
    float: left;
    width: 12.5%;
}

.focus img {
    width: 100%;
    height: 150px;
}

.focus ol {
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 100;
}

.focus ol li {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 3px;
    border-radius: 2px;
    background-color: #fff;
}

.focus ol li.current {
    width: 10px;
}


/* 局部导航栏模块 */

.local-nav {
    display: flex;
    height: 64px;
    margin: 2px 3px;
    background-color: #fff;
    border-radius: 10px;
}

.local-nav li {
    flex: 1;
}

.local-nav li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
}


/* .local-nav li a span:nth-child(1) {
    width: 32px;
    height: 32px;
    background-size: 32px;
    margin-bottom: 5px;
}

.local-nav li a span:nth-child(2) {
    font-size: 10px;
}

.local-nav li:nth-child(1) span:nth-child(1) {
    background: url(../image/localnav_bg.png) no-repeat 0 0;
    background-size: 32px;
}

.local-nav li:nth-child(2) span:nth-child(1) {
    background: url(../image/localnav_bg.png) no-repeat 0 -33px;
    background-size: 32px;
}

.local-nav li:nth-child(3) span:nth-child(1) {
    background: url(../image/localnav_bg.png) no-repeat 0 -65px;
    background-size: 32px;
}

.local-nav li:nth-child(4) span:nth-child(1) {
    background: url(../image/localnav_bg.png) no-repeat 0 -96px;
    background-size: 32px;
}

.local-nav li:nth-child(5) span:nth-child(1) {
    background: url(../image/localnav_bg.png) no-repeat 0 -128px;
    background-size: 32px;
} */


/* 上述换个简单的写法： */

.local-nav li [class^="local-nav-icon"] {
    width: 32px;
    height: 32px;
    margin-top: 8px;
    background: url("../image/localnav_bg.png") no-repeat 0 0;
    background-size: 32px;
}

.local-nav li .local-nav-icon-icon2 {
    background-position: 0 -32px;
}

.local-nav li .local-nav-icon-icon3 {
    background-position: 0 -64px;
}

.local-nav li .local-nav-icon-icon4 {
    background-position: 0 -96px;
}

.local-nav li .local-nav-icon-icon5 {
    background-position: 0 -128px;
}


/* 主导航模块 */

nav {
    margin: 2px 3px;
    border-radius: 10px;
    overflow: hidden;
}

nav [class^="nav-common"] {
    display: flex;
    height: 88px;
    /* background-color: pink; */
}

.nav-common-common1 {
    background: -webkit-linear-gradient(left, #fa5a55, #fa994d);
}

.nav-common-common2 {
    background: -webkit-linear-gradient(left, #4B90ED, #53BCED);
}

.nav-common-common3 {
    background: -webkit-linear-gradient(left, #34C2A9, #6CD559);
}

nav [class^="nav-common"]:nth-child(2) {
    margin: 2px 0 2px 0;
}

.nav-items {
    flex: 1;
    /* 下一级的，可以这样写 */
    display: flex;
    flex-direction: column;
}

.nav-items a {
    flex: 1;
    text-align: center;
    line-height: 44px;
    color: #fff;
    font-size: 14px;
    /* 文字阴影 */
    text-shadow: 1px 1px rgba(0, 0, 0, .2);
}

.nav-items:nth-child(-n+2) {
    border-right: 1px solid #fff;
}

.nav-items:nth-child(1) a {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-items:nth-child(1) a span {
    flex: 1;
}

.nav-items:nth-child(1) a span:nth-child(2) {
    width: 44px;
    height: 36px;
    background: url(../image/sprite.png) no-repeat 0 -130px;
    background-size: 104px;
}

.nav-items:nth-child(n+2) a:nth-child(1) {
    border-bottom: 1px solid #fff;
}

.nav-common-common2 .nav-items:nth-child(1) a span:nth-child(2) {
    background-position: 0 -290px;
    background-size: 104px;
}

.nav-common-common3 .nav-items:nth-child(1) a span:nth-child(2) {
    background-position: 0 -180px;
    background-size: 104px;
}


/* 侧导航入口模块 */

.subnav-entry {
    display: flex;
    border-radius: 10px;
    margin: 2px 3px;
    background-color: #fff;
    flex-wrap: wrap;
}

.subnav-entry li {
    /* 里面的盒子可以写百分百，相对于父亲来说的 */
    flex: 20%;
}

.subnav-entry li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    /* text-align: center; */
    margin-top: 3px;
    padding: 5px 0;
}

[class^="subnav-entry-icon"] {
    display: block;
    width: 28px;
    height: 28px;
    background: url(../image/subnav-bg.png) no-repeat 0 0;
    background-size: 28px;
}

.subnav-entry-icon-icon2 {
    background-position: 0 -28px;
}

.subnav-entry-icon-icon3 {
    background-position: 0 -65px;
}

.subnav-entry-icon-icon4 {
    background-position: 0 -99px;
}

.subnav-entry-icon-icon5 {
    background-position: 0 -133px;
}

.subnav-entry-icon-icon6 {
    background-position: 0 -163px;
}

.subnav-entry-icon-icon7 {
    background-position: 0 -231px;
}

.subnav-entry-icon-icon8 {
    background-position: 0 -261px;
}

.subnav-entry-icon-icon9 {
    background-position: 0 -291px;
}

.subnav-entry-icon-icon0 {
    background-position: 0 -322px;
}


/* 酒店活动图片 */

.sub-banner {
    display: flex;
    height: 148px;
    margin-top: 8px;
}

.banner {
    position: relative;
    top: 0;
    left: 0;
    flex: 1;
    background-color: #fff;
    border-radius: 10px;
    margin: 0 3px;
}

.banner-header {
    display: block;
    height: 20px;
    line-height: 20px;
    text-align: center;
    margin-top: 8px;
}

.banner-header h3 {
    position: absolute;
    top: -9px;
    left: 5px;
    color: #b58a4d;
}

.banner .banner-header-right {
    position: absolute;
    top: 8px;
    right: 6px;
    background-color: #fbefd5;
    color: #a6702c;
    font-size: 10px;
}

.banner-img {
    display: flex;
    position: relative;
    top: 0;
    left: 0;
}

.banner-img .banner-img-img {
    flex: 1;
    margin: 5px 4px;
    position: relative;
    top: 0;
    left: 0;
}

.banner-img img {
    width: 100%;
    height: 84px;
    border-radius: 4px;
    margin-bottom: 3px;
}

.banner-img .banner-img-img-tag {
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 6px;
    background-color: #e0c596;
    border-radius: 4px;
}

.banner-img-img-tag:first-child {
    color: #fff;
    background-color: #4c4d52;
}

.banner-img .banner-img-img-tag2 {
    position: absolute;
    bottom: 25px;
    left: 2px;
    color: #fff;
    font-size: 6px;
}

.banner-img .banner-img-img-title {
    font-size: 12px;
    font-weight: 700;
}

.price {
    color: #ef6f2e;
    font-weight: 700;
    font-size: 12px;
}

.origin-price {
    color: #666;
    font-size: 10px;
    text-decoration: line-through;
}

.sub-title {
    color: #fff;
    background: -webkit-linear-gradient(left, #ea655d, #ed8b5c);
}


/* 特价活动图片 */

.bargain-img {
    margin: 10px 3px;
}

.bargain-img img {
    width: 100%;
    border-radius: 10px;
}


/* 热门活动模块 */

.hot {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
}

.hot-header {
    height: 45px;
    border-bottom: 1px solid #f0f2f0;
}

.hot-header h3 {
    /* 以下这2行，将文字隐藏 */
    text-indent: -999px;
    overflow: hidden;
}

.hot-header h3::after {
    position: absolute;
    top: 15px;
    left: 10px;
    content: "";
    width: 79px;
    height: 15px;
    background: url(../image/hot.png) no-repeat 0 -20px;
    background-size: 79px;
}

.hot-header .advertise {
    position: relative;
    top: -30px;
    left: 100px;
    font-size: 8px;
    background-color: #d7d8d6;
    color: #fff;
    border-radius: 3px;
    padding-left: 16px;
}

.hot-header .advertise::before {
    position: absolute;
    top: 0px;
    left: 0px;
    content: "";
    width: 15px;
    height: 14px;
    background: url(../image/sprite.png) no-repeat -29px -99px;
    background-size: 46px;
}

.hot-header .more {
    position: absolute;
    top: 15px;
    right: 10px;
    background: -webkit-linear-gradient(left, #ef6c6a, #f085bd);
    color: #fff;
    font-size: 10px;
    padding: 2px 15px 2px 5px;
    border-radius: 15px;
}


/* 第一种做法：用文字图标来做 */


/* .hot-header .more::after {
    font-family: 'icomoon';
    content: "\e930";
    vertical-align: middle;
    padding-left:5px;
} */


/* 另外一种写法：用边框来做 */

.hot-header .more::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 6px;
    width: 5px;
    height: 5px;
    border-top: 2px solid #FFF;
    border-right: 2px solid #FFF;
    transform: rotate(45deg);
}

.hot-body {
    /* height: 300px; */
}

.row {
    display: flex;
}

.row a {
    flex: 1;
    border-bottom: 1px solid #f3f5f3;
}

.row a:first-child {
    border-right: 1px solid #f3f5f3;
}

.row a img {
    width: 100%;
}


/* 联系/下载模块 */

.toolbox {
    height: 120px;
    padding-bottom: 50px;
    margin-top: 30px;
}

.tool-group {
    display: flex;
    margin: 0 12px;
    justify-content: space-around
}

.tool-group a {
    flex: 1;
    height: 32px;
    border: 1px solid #999;
    border-radius: 4px;
    margin: 0 15px;
    text-align: center;
    line-height: 32px;
    min-width: 100px;
}

.tool-group .tel::before,
.tool-group .download::before,
.tool-group .laguage::before,
.tool-group .laguage::after {
    font-family: "icomoon";
    content: "\e946";
    padding: 5px;
    font-size: 12px;
    vertical-align: middle;
}

.tool-group .download::before {
    content: "\e939";
}

.tool-group .laguage::before {
    content: "\e945";
}

.tool-group .laguage::after {
    content: "\e92c";
}

.tool-ver {
    margin-top: 12px;
    font-size: 12px;
    text-align: center;
    line-height: 15px;
    color: #666;
}

.tool-ver a {
    color: #666;
}

.tool-ver a:first-child::after {
    /* content: "";
    margin-right: 24px;
    padding-right: 24px;
    background-position: 100%;
    background-image: -webkit-linear-gradient(90deg, transparent 50%, #ccc 0);
    background-repeat: no-repeat;
    background-size: 1px 100%; */
    content: "";
    margin-right: 24px;
    padding-right: 24px;
    background-position: 100%;
    background-image: linear-gradient(90deg, transparent 50%, #ccc 0);
    background-repeat: no-repeat;
    background-size: 1px 100%;
}

.tool-ver span {
    display: block;
    margin-top: 10px;
}


/* 底部导航栏模块 */

.tabbar {
    display: flex;
    background-color: #fff;
    height: 50px;
    justify-content: center;
    margin-bottom: 10px;
}

.tabbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #666;
}

.tabbar a span {
    flex: 1;
}

.tabbar [class^="tabbar-icon"] {
    background: url(../image/tabbar.png) no-repeat 0px 0px;
    background-size: 32px;
    width: 32px;
    height: 32px;
    padding: 3px 0;
}

.tabbar .tabbar-icon-icon2 {
    background-position: 0 -32px;
}

.tabbar .tabbar-icon-icon3 {
    background-position: 0 -64px;
}

.tabbar .tabbar-icon-icon4 {
    background-position: 0 -128px;
}